<template>
	<basic-container>
		<avue-crud :option="option" :data="data" ref="crud" :table-loading="loading" :permission="permissionList" :page="page"
		@refresh-change="refreshChange" @search-change="searchChange" @search-reset="searchReset" @current-change="currentChange"
		@size-change="sizeChange" @on-load="onLoad" @selection-change="selectionChange">
			<!-- 自定义添加搜索条件  签约区域搜索  -->
			<template slot="search">
				<div style="height: 51px;margin-bottom: 8px;">
					<el-col  style="margin-top: 0.7rem;width: 90px;">
						<span>签约区域：</span>
					</el-col>
					<el-col  :span="4" style="margin-right: 1rem;margin-top: 0.4rem;">
						<el-select size="small" v-model="signAreaId" placeholder="区域" @change="changeArea">
							<el-option v-for="item in areas" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-col>
					<el-col  :span="4" style="margin-right: 1rem; margin-top: 0.4rem;">
						<el-select size="small" v-model="signCityId" placeholder="城市">
							<el-option v-for="item in citys" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-col>
				</div>
			</template>
			<template slot="menuLeft">
				<el-button type="primary" size="small" @click="editBatch()" >批量设置计提比例</el-button>
			</template>
			<template slot-scope="scope" slot="menu">
				<el-button type="text" size="small" @click="edit(scope.row.id)" v-has="'/mall-cloud-base/store/setExtractRateByStoreId'">设置计提比例</el-button>
			</template>
		</avue-crud>
<!--		设置计提比例弹窗-->
		<el-dialog
				width="60%"
				:visible.sync="dialogFormVisible"
				:title="title"
				@close="closeDialog"
				append-to-body
				:close-on-click-modal="false"
		>
			<avue-form ref="form" v-model="obj" :option="optionAdd" @submit="submit">
				<template slot-scope="scope" slot="text">
					<div  style="color: #909399;font-size: 12px;line-height: 10px;margin-top: -10px;">您设置新的计提比例后，并不改动之前对个别商品的计提比例设置</div>
				</template>
			</avue-form>
			<!--      <div slot="footer" class="dialog-footer" style="margin-top: -2rem;">-->
			<!--        <el-button type="primary" v-if="isAdd" @click="submit" :loading="addbtnLoading">提交</el-button>-->
			<!--        <el-button type="primary" v-else @click="upDataSubmit" :loading="editbtnLoading">确定</el-button>-->
			<!--        <el-button @click="closeDialog">取消</el-button>-->
			<!--      </div>-->
		</el-dialog>
	</basic-container>
</template>

<script>

	import {
		getList,
		setExtractRateByStoreId,
		setExtractRateByStoreIds

	} from "@/api/base/store/storeExtractRateMgr";
	import {
		testExtractRate
	}from "@/util/util";
	import {

		getOrganizationListByLevel,

	} from "@/api/admin/area";
	import {
		mapGetters
	} from "vuex";
	var Dict = JSON.parse(localStorage.getItem('mall-dictionary')).content;
	var DIC = {
		STORETYPE:[{
			label: '自营',
			value: 0
		}, {
			label: '非自营',
			value: 1
		}]
	}
	export default {
		components: {

		},
		data() {
			return {
				storeId: "",
				// paperWorkList:[],

				//证件已选择数组
				checkList: [],
				dialogFormVisible: false, //详情遮罩
				obj: {},
				innerVisible: false, //证件照遮罩
				workImg: {},
				isView: false, //当时是否为查看状态
				title: "店铺管理",
				query: {},
				ids:"",
				signAreaId:null,
				signCityId:null,
				areas:[],
				citys:[],
				isAddOne:true,
				loading: true,
				rolesTree: [],
				rolesKeys: [],
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				//相册数据
				pic: {},
				optionPic: {
					emptyBtn: false,
					submitBtn: false,
				},
				//表单数据
				form: {},
				optionAdd: {
					labelWidth: 150,
					emptyBtn:false,
					column: [
						{
							label: "计提比例",
							prop: "extractRate",
							row: true,
							span: 18,
							maxlength: 4,
							showWordLimit: true,
							tip: '请填0-1的小数，如0.10表示10%',
							rules: [
								{
									required: true,
									message: "请输入计提比例",
									trigger: "blur"
								},
								{
									validator:testExtractRate,
									trigger: "blur"
								}
							]
						},
						{
							prop: "text",
							formslot:true,
							span:18
						}
					]
				},
				option: {
					addBtn: false,
					searchBtn: true,
					size: 'mini',
					excelBtn: false,
					tip: false,
					border: true,
					index: false,
					delBtn: false,
					viewBtn: false,
					editBtn: false,
					rowKey: 'id',
					height: 'auto',
					dialogType: 'dialog',
					align: 'center',
					selection: true,
					column: [{
							search: true,
							label: "店铺名称",
							prop: "storeName",

						},
						{
							label: "主对接人",
							prop: "dockingPeopleName",

						},
						{
							label: "经营品类",
							prop: "gcNames",
						},
						{
							label: "签约区域",
							prop: "signingArea",

						},
						{
							label: "店铺类型",
							prop: "storeType",
							dicData:DIC.STORETYPE,
							search: true,
							type: "select",

						},
						{

							label: "计提比例",
							prop: "extractRate",

						}
					],
				},
				data: [],
			};
		},
		computed: {
			...mapGetters(["permission", 'userInfo', 'dictionariy']),
			permissionList() {
				return {

				};
			},
		},
		methods: {
			//选择签约区域
			changeArea() {
				//签约区域选择框
				getOrganizationListByLevel(this.signAreaId, 3).then(res => {
					this.signCityId="";
					this.citys = res.data.data;
					console.log(this.citys)
				})
			},
			//表格编辑
			edit(storeId) {
				this.storeId = storeId
				this.title = "设置计提比例";
				this.dialogFormVisible = true
				this.isAddOne = true
				this.obj.id = storeId;
			},
			editBatch() {
				this.title = "批量设置计提比例";
				if(this.ids.length<1) {
					this.$message({
						type: "error",
						message: '请至少选择一个店铺'
					});
					return
				}
				this.dialogFormVisible = true
				this.isAddOne = false
				this.obj.ids = this.ids
				this.loading = false;
			},
			selectionChange(list){
				var str = JSON.stringify(list);
				var obj = JSON.parse(str);
				var a = "";
				for(var i=0;i<obj.length;i++){
					a += obj[i].id + ",";
				}
				this.ids = a.substring(0,a.length - 1);
				console.log(this.ids)
			},
			//新增提交
			submit(a, b) {
				this.$refs.form.validate((valid) => {
					if (valid) {
						if (this.isAddOne) {
							this.loading = true;
							setExtractRateByStoreId(this.obj.id,this.obj.extractRate).then(
									(res) => {
										if (res.data.code == 200) {
											this.loading = false;
											this.dialogFormVisible = false;
											this.onLoad(this.page);
											this.$nextTick(() => {
												this.$refs["form"].clearValidate()
											})
											this.$message({
												type: "success",
												message: "新增成功!"
											});
											this.obj = {};
											setTimeout(()=>{
												b();
											},1000)
										}
									},
									error => {
										this.$message({
											type: 'error',
											message: error
										})
									}
							);
						} else {
							this.loading = true;
							if (this.obj.ids==""){
								this.$message({
									type: 'error',
									message: "需要最少选中一个"
								})

								this.dialogFormVisible = false;
								this.onLoad(this.page);
								this.$nextTick(() => {
									this.$refs["form"].clearValidate()
								})
								setTimeout(()=>{
									b();
								},1000)
								return
							}
							setExtractRateByStoreIds(this.obj.ids,this.obj.extractRate).then(
									(res) => {
										if (res.data.code == 200) {
											this.loading = false;
											this.dialogFormVisible = false;
											this.onLoad(this.page);
											this.$nextTick(() => {
												this.$refs["form"].clearValidate()
											})
											this.$message({
												type: "success",
												message: "新增成功!"
											});
											this.obj = {};
											setTimeout(()=>{
												b();
											},1000)
										}
									},
									error => {
										this.$message({
											type: 'error',
											message: error
										})
									}
							);
						}
					}
				});
			},
			searchReset() {
				this.signAreaId = "";
				this.signCityId = "";
				this.query = {};
				this.onLoad(this.page);
			},
			//搜索
			searchChange(params,done) {
				this.page.currentPage = 1
				params.signAreaId = this.signAreaId
				params.signCityId = this.signCityId
				this.query = params;
				this.onLoad(this.page, params,done);
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			refreshChange() {
				this.onLoad(this.page);
			},
			closeDialog() {
				this.obj = {};
				this.dialogFormVisible = false;
			},
			onLoad(page, params = {},done) {
				this.loading = true;
				getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
					if(done){
						done();
					}
					const data = res.data;
					this.page.total = data.count;
					// for (let item of data.data) {
					// 	getParentAndGrandInfoById(item.signAreaId).then(res => {
					// 		item.allAreaName = res.data.data.allName
					// 	}, (error) => {
					// 		this.$message({
					// 			type: 'error',
					// 			message: error
					// 		})
					// 	});
					// }
					this.data = data.data;
					this.loading = false;
					//省级选择框
					getOrganizationListByLevel(2, 2).then(res => {
						this.areas = res.data.data;
					})
				});
			}
		}
	};
</script>

<style scoped>
	.activeBut {
		background-color: #333333;
		color: #FFFFFF;
	}

	.formTitle {
		font-size: 0.7rem;
		color: #000000;
	}

	.input {
		width: 200px;
	}

	.paperWork {
		height: 40px;
		line-height: 40px;
	}

	.el-checkbox {
		width: 50%;
		margin-left: 150px;
	}

	.checkPaper {
		color: #000000;
	}

	.checkPaper1 {
		color: red;
	}

	.img {
		width: 300px;
		height: auto;
	}
</style>
